﻿@import '../../../../Styles/abstracts/_functions.scss';
@import '../../../../Styles/abstracts/_bit-css-variables.scss';

.example-content {
    width: 17rem;
    display: flex;
    overflow-x: auto;
    flex-flow: column wrap;
}

.example-content-standalone {
    padding: rem2(5px);
}

.validation-summary {
    overflow: hidden;
    margin-bottom: rem2(10px);
    background-color: $bit-color-error-light;
    border-left: rem2(5px) solid $bit-color-requried;
}

::deep {
    .custom-class {
        overflow: hidden;
        margin-inline: 1rem;
        border-radius: 1rem;
        border: 2px solid tomato;
    }

    .custom-class *, .custom-class *::after {
        border: none;
    }

    .custom-root {
        height: 3rem;
        margin: 1rem;
        display: flex;
        align-items: end;
        position: relative;
        border-radius: 0.5rem;
    }

    .custom-label {
        top: 0;
        left: 0;
        z-index: 1;
        padding: 0;
        font-size: 1rem;
        color: darkgray;
        position: absolute;
        transform-origin: top left;
        transform: translate(0, 22px) scale(1);
        transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    }

    .custom-label-top {
        transform: translate(0, 1.5px) scale(0.75);
    }

    .custom-input {
        padding: 0;
        font-size: 1rem;
        font-weight: 900;
    }

    .custom-input-container {
        border-radius: 0;
        position: relative;
        border-width: 0 0 1px 0;
    }

    .custom-input-container::after {
        content: '';
        width: 0;
        height: 2px;
        border: none;
        position: absolute;
        inset: 100% 0 0 50%;
        background-color: blueviolet;
        transition: width 0.3s ease, left 0.3s ease;
    }

    .custom-focus .custom-input-container::after {
        left: 0;
        width: 100%;
    }

    .custom-focus .custom-label {
        color: blueviolet;
        transform: translate(0, 1.5px) scale(0.75);
    }

    .custom-toolbar {
        background-color: blueviolet;
    }

    .custom-clock-face {
        background-color: blueviolet;
    }

    .custom-clock-number {
        font-weight: bold;
    }

    .custom-clock-pin,
    .custom-clock-pointer,
    .custom-clock-pointer-thumb,
    .custom-clock-selected-number {
        color: gray;
        background-color: white;
    }

    .custom-clock-pointer-thumb-minute {
        border-color: white;
    }

    .validation-message {
        font-size: rem2(12px);
        color: $bit-color-requried;
    }

    .validation-errors {
        margin: rem2(5px);
    }
}
